<template>
    <div class="home-center">
        <div class="legend">
            <div class="legend-item" v-for="(item, index) in legendList" :key="index">
                <span class="legend-item-color" :style="{ background: item.color }"></span>
                <div class="legend-item-text">{{ item.txt }}</div>
            </div>
        </div>
        <el-table :data="tableData" height="100%" border style="width: 100%" :cell-style="columnStyle"
            :header-cell-style="columnStyle" header-row-class-name="header-class">
            <el-table-column :label='tableTitle' width="100%" align="center">
                <el-table-column :label="taskTarget" width="100%" align="left">
                    <el-table-column prop="dateName" label="时间线" align="center" fixed="left">
                    </el-table-column>
                    <el-table-column prop="date1[0]" :label="dateLabel[0]" align="center">
                        <template slot-scope="scope">
                            <div v-if="scope.row.date1[1] == ''">
                                <div class="isOk-yes"> {{
                                    scope.row.date1[0] }}
                                </div>
                            </div>
                            <div v-if="scope.row.date1[1] == 'no'">
                                <div class="no">
                                    <img src="@/assets/images/home/flag_gray.png" alt="否" />{{ scope.row.date1[0] }}
                                </div>
                            </div>
                            <div v-if="scope.row.date1[1] == 'yes'">
                                <div class="no">
                                    <img src="@/assets/images/home/flag_red.png" alt="是" />{{ scope.row.date1[0] }}
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="date2[0]" :label="dateLabel[1]" align="center">
                        <template slot-scope="scope">
                            <div v-if="scope.row.date2[1] == ''">
                                <div class="isOk-yes"> {{
                                    scope.row.date2[0] }}
                                </div>
                            </div>
                            <div v-if="scope.row.date2[1] == 'no'">
                                <div class="no">
                                    <img src="@/assets/images/home/flag_gray.png" alt="否" />{{ scope.row.date2[0] }}
                                </div>
                            </div>
                            <div v-if="scope.row.date2[1] == 'yes'">
                                <div class="no">
                                    <img src="@/assets/images/home/flag_red.png" alt="是" />{{ scope.row.date2[0] }}
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="date3[0]" :label="dateLabel[2]" align="center">
                        <template slot-scope="scope">
                            <div v-if="scope.row.date3[1] == ''">
                                <div class="isOk-yes"> {{
                                    scope.row.date3[0] }}
                                </div>
                            </div>
                            <div v-if="scope.row.date3[1] == 'no'">
                                <div class="no">
                                    <img src="@/assets/images/home/flag_gray.png" alt="否" />{{ scope.row.date3[0] }}
                                </div>
                            </div>
                            <div v-if="scope.row.date3[1] == 'yes'">
                                <div class="no">
                                    <img src="@/assets/images/home/flag_red.png" alt="是" />{{ scope.row.date3[0] }}
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="date4[0]" :label="dateLabel[3]" align="center">
                        <template slot-scope="scope">
                            <div v-if="scope.row.date4[1] == ''">
                                <div class="isOk-yes"> {{
                                    scope.row.date4[0] }}
                                </div>
                            </div>
                            <div v-if="scope.row.date4[1] == 'no'">
                                <div class="no">
                                    <img src="@/assets/images/home/flag_gray.png" alt="否" />{{ scope.row.date4[0] }}
                                </div>
                            </div>
                            <div v-if="scope.row.date4[1] == 'yes'">
                                <div class="no">
                                    <img src="@/assets/images/home/flag_red.png" alt="是" />{{ scope.row.date4[0] }}
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="date5[0]" :label="dateLabel[4]" align="center">
                        <template slot-scope="scope">
                            <div v-if="scope.row.date5[1] == ''">
                                <div class="isOk-yes"> {{
                                    scope.row.date5[0] }}
                                </div>
                            </div>
                            <div v-if="scope.row.date5[1] == 'no'">
                                <div class="no">
                                    <img src="@/assets/images/home/flag_gray.png" alt="否" />{{ scope.row.date5[0] }}
                                </div>
                            </div>
                            <div v-if="scope.row.date5[1] == 'yes'">
                                <div class="no">
                                    <img src="@/assets/images/home/flag_red.png" alt="是" />{{ scope.row.date5[0] }}
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="date6[0]" :label="dateLabel[5]" align="center">
                        <template slot-scope="scope">
                            <div v-if="scope.row.date6[1] == ''">
                                <div class="isOk-yes"> {{
                                    scope.row.date6[0] }}
                                </div>
                            </div>
                            <div v-if="scope.row.date6[1] == 'no'">
                                <div class="no">
                                    <img src="@/assets/images/home/flag_gray.png" alt="否" />{{ scope.row.date6[0] }}
                                </div>
                            </div>
                            <div v-if="scope.row.date6[1] == 'yes'">
                                <div class="no">
                                    <img src="@/assets/images/home/flag_red.png" alt="是" />{{ scope.row.date6[0] }}
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="date7[0]" :label="dateLabel[6]" align="center">
                        <template slot-scope="scope">
                            <div v-if="scope.row.date7[1] == ''">
                                <div class="isOk-yes"> {{
                                    scope.row.date7[0] }}
                                </div>
                            </div>
                            <div v-if="scope.row.date7[1] == 'no'">
                                <div class="no">
                                    <img src="@/assets/images/home/flag_gray.png" alt="否" />{{ scope.row.date7[0] }}
                                </div>
                            </div>
                            <div v-if="scope.row.date7[1] == 'yes'">
                                <div class="no">
                                    <img src="@/assets/images/home/flag_red.png" alt="是" />{{ scope.row.date7[0] }}
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="date8[0]" :label="dateLabel[7]" align="center">
                        <template slot-scope="scope">
                            <div v-if="scope.row.date8[1] == ''">
                                <div class="isOk-yes"> {{
                                    scope.row.date8[0] }}
                                </div>
                            </div>
                            <div v-if="scope.row.date8[1] == 'no'">
                                <div class="no">
                                    <img src="@/assets/images/home/flag_gray.png" alt="否" />{{ scope.row.date8[0] }}
                                </div>
                            </div>
                            <div v-if="scope.row.date8[1] == 'yes'">
                                <div class="no">
                                    <img src="@/assets/images/home/flag_red.png" alt="是" />{{ scope.row.date8[0] }}
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="date9[0]" :label="dateLabel[8]" align="center">
                        <template slot-scope="scope">
                            <div v-if="scope.row.date9[1] == ''">
                                <div class="isOk-yes"> {{
                                    scope.row.date9[0] }}
                                </div>
                            </div>
                            <div v-if="scope.row.date9[1] == 'no'">
                                <div class="no">
                                    <img src="@/assets/images/home/flag_gray.png" alt="否" />{{ scope.row.date9[0] }}
                                </div>
                            </div>
                            <div v-if="scope.row.date9[1] == 'yes'">
                                <div class="no">
                                    <img src="@/assets/images/home/flag_red.png" alt="是" />{{ scope.row.date9[0] }}
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="date10[0]" :label="dateLabel[9]" align="center">
                        <template slot-scope="scope">
                            <div v-if="scope.row.date10[1] == ''">
                                <div class="isOk-yes"> {{
                                    scope.row.date10[0] }}
                                </div>
                            </div>
                            <div v-if="scope.row.date10[1] == 'no'">
                                <div class="no">
                                    <img src="@/assets/images/home/flag_gray.png" alt="否" />{{ scope.row.date10[0] }}
                                </div>
                            </div>
                            <div v-if="scope.row.date10[1] == 'yes'">
                                <div class="no">
                                    <img src="@/assets/images/home/flag_red.png" alt="是" />{{ scope.row.date10[0] }}
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="date11[0]" :label="dateLabel[10]" align="center">
                        <template slot-scope="scope">
                            <div v-if="scope.row.date11[1] == ''">
                                <div class="isOk-yes"> {{
                                    scope.row.date11[0] }}
                                </div>
                            </div>
                            <div v-if="scope.row.date11[1] == 'no'">
                                <div class="no">
                                    <img src="@/assets/images/home/flag_gray.png" alt="否" />{{ scope.row.date11[0] }}
                                </div>
                            </div>
                            <div v-if="scope.row.date11[1] == 'yes'">
                                <div class="no">
                                    <img src="@/assets/images/home/flag_red.png" alt="是" />{{ scope.row.date11[0] }}
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="date12[0]" :label="dateLabel[11]" align="center">
                        <template slot-scope="scope">
                            <div v-if="scope.row.date12[1] == ''">
                                <div class="isOk-yes"> {{
                                    scope.row.date12[0] }}
                                </div>
                            </div>
                            <div v-if="scope.row.date12[1] == 'no'">
                                <div class="no">
                                    <img src="@/assets/images/home/flag_gray.png" alt="否" />{{ scope.row.date12[0] }}
                                </div>
                            </div>
                            <div v-if="scope.row.date12[1] == 'yes'">
                                <div class="no">
                                    <img src="@/assets/images/home/flag_red.png" alt="是" />{{ scope.row.date12[0] }}
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                </el-table-column>
            </el-table-column>

        </el-table>
    </div>

</template>
<script>
import { color } from 'echarts';

export default {
    name: 'HomeCenter',
    data() {
        return {
            legendList: [{
                txt: "已结束",
                color: "#2ecc71"
            }, {
                txt: "进行中",
                color: "#3498db"
            }, {
                txt: "未开始",
                color: "#95a5a6"
            }],
            dateLabel: ["5.23-5.24","6.1-6.2", "6.14-6.15", "6.21-6.22", "7.5-7.6", "7.19-7.20", "7.26-7.27",  "7.30-8.1", "8.2-8.3", "8.6-8.8", "8.16-8.17", "8.23-8.24", "8.30-8.31"],
            tableTitle: '筑基行动"挂图作战"',
            taskTarget: '前端目标：30户FTTR/周末，宽带渗透率提升0.1%/周，千兆渗透率提升5%/周\n后端目标：老旧终端升级完成80%，低速提速全面清零、质差标签全量清除、光衰100%整治，无线网及宽带网投诉全量关怀',
            tableData: [{
                dateName: '红星营业部',
                date1: ['南面滩安置房','no'],
                date2: ['/',''],
                date3: ['/',''],
                date4: ['/',''],
                date5: ['省广电总台专家公寓', 'no'],
                date6: ['城关区天庆嘉园B区','yes'],
                date7: ['城关区天庆嘉园A区',""],
                date8: ['城关区天庆嘉园C区',""],
                date9: ['国泰嘉园',""],
                date10: ['雁栖园',""],
                date11: ['红叶城',""],
                date12: ['康乐花园', ""],
                date13: ['红星紫郡',""],
            }, {
                dateName: '张苏滩营业部',
                date1: ['/',''],
                date2: ['兰宁小区',"no"],
                date3: ['南昌路经济适用房',"no"],
                date4: ['金雁花园',"no"],
                date5: ['地震局东岗西路家属院',"no"],
                date6: ['南昌路科苑一区家属楼',"no"],
                date7: ['省人民医院家属院',""],
                date8: ['/',""],
                date9: ['南河新村',""],
                date10: ['广电家园',""],
                date11: ['城关区政府家属院',""],
                date12: ['安居小区南区',''],
                date13: ['/',''],
            }]
        }
    },
    methods: {
        getDateRangeStatus(dateRangeStr) {
            try {
                // 分割字符串，得到开始和结束部分
                const parts = dateRangeStr.split('-');
                if (parts.length !== 2) {
                    return 'invalid';
                }
                const startPart = parts[0].split('.');
                const endPart = parts[1].split('.');
                if (startPart.length < 2 || endPart.length < 2) {
                    return 'invalid';
                }
                // 解析月份和日期
                const startMonth = parseInt(startPart[0]);
                const startDay = parseInt(startPart[1]);
                const endMonth = parseInt(endPart[0]);
                const endDay = parseInt(endPart[1]);
                // 获取当前日期
                const now = new Date();
                const currentYear = now.getFullYear(); // 获取当前年份，假设日期范围是当前年份
                const currentMonth = now.getMonth() + 1;
                const currentDay = now.getDate();
                // 将日期转换为数字（月份*100 + 日期）以便比较
                const current = currentMonth * 100 + currentDay;
                const start = startMonth * 100 + startDay;
                const end = endMonth * 100 + endDay;
                if (current >= start && current <= end) {
                    return 'current';
                } else if (current < start) {
                    return 'future';
                } else {
                    return 'past';
                }
            } catch (e) {
                console.error('日期解析错误:', e);
                return 'invalid';
            }
        },
        // 列样式函数
        columnStyle({ row, column, rowIndex, columnIndex }) {
            if (column.label && column.label.includes('-')) {
                const status = this.getDateRangeStatus(column.label);
                switch (status) {
                    case 'current':
                        return 'background: #3498db; color: white';
                    case 'future':
                        return 'background: #95a5a6; color: white';
                    case 'past':
                        return 'background: #2ecc71; color: white';
                    default:
                        // 解析失败，不应用样式
                        return '';
                                
                }
            }
            // 对于不包含连字符的列，不应用样式
            return '';
        },

    }
}
</script>
<style scoped lang="scss">
.home-center {
    width: 100%;
    height: 100%;
    position: relative;

    .legend {
        width: 200px;
        height: auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: absolute;
        top: 12px;
        right: 10px;
        z-index: 10;

        .legend-item {
            display: flex;
            align-items: center;

            .legend-item-color {
                display: inline-block;
                width: 10px;
                height: 10px;
                //background-color: #2ecc71;
                // border-radius: 50%;
                margin-right: 5px;
            }



            .legend-item-text {
                font-size: 14px;
                font-family: SourceHanSansSC-regular;
                font-weight: normal;
            }
        }

                            

        // .legend-item:nth-child(2) {
        //     .legend-item-color {
        //         background-color: #3498db;
        //     }
        // }

        // .legend-item:nth-child(3) {
        //     .legend-item-color {
        //         background-color: #95a5a6;
        //     }
        // }
    }
}

::v-deep .header-class:nth-child(1) .cell {
    color: #FD4F4F !important;
    font-size: 20px !important;
    font-family: SourceHanSansSC-regular !important;
    font-weight: bold !important;
}

::v-deep .header-class:nth-child(2) .cell {
    color: #34C758 !important;
    font-size: 14px !important;
    font-family: SourceHanSansSC-regular !important;
    font-weight: bold !important;
    white-space: pre-line;
}
</style>